<template>
    <div class="login-wrapper">
        <a-form-model
            class="user-login"
            ref="formLoginRef"
            :model="formData"
            :rules="rules"
            :label-col="labelCol"
            :wrapper-col="wrapperCol"
        >
            <a-form-model-item prop="username" label="用户名">
                <a-input
                    size="large"
                    type="text"
                    placeholder="请输入'user' or 'admin'"
                    v-model="formData.username"
                >
                    <a-icon
                        slot="prefix"
                        type="user"
                        :style="{ color: '#D6DFEC' }"
                    />
                </a-input>
            </a-form-model-item>
            <a-form-model-item prop="password" label="密码">
                <a-input-password
                    size="large"
                    placeholder="请输入密码 123456"
                    v-model="formData.password"
                    autocomplete
                >
                    <a-icon
                        slot="prefix"
                        type="lock"
                        :style="{ color: '#D6DFEC' }"
                    />
                </a-input-password>
            </a-form-model-item>
            <a-button class="login-button" @click="handleSubmit">登录</a-button>
        </a-form-model>
    </div>
</template>
<script>
import { mapGetters } from "vuex";

export default {
    name: "loginForm",
    components: {},
    computed: {
        ...mapGetters(["theme"]),
    },
    mounted() {},
    data() {
        return {
            labelCol: { span: 6 },
            wrapperCol: { span: 18 },
            formData: {
                username: "",
                password: "",
            },
            rules: {
                username: [
                    {
                        required: true,
                        message: "请输入用户名",
                        trigger: ["blur", "change"],
                    },
                ],
                password: [
                    {
                        required: true,
                        message: "请输入密码",
                        trigger: ["blur", "change"],
                    },
                ],
            },
            form: {
                name: "",
            },
        };
    },
    methods: {
        handleSubmit() {
            this.$refs.formLoginRef.validate((valid) => {
                console.log(valid, "valid");
                if (valid) {
                    const username = this.formData.username;
                    let roleList = [];
                    if (username == "user") {
                        roleList = ["user"];
                    } else if (username == "admin") {
                        roleList = ["admin"];
                    } else {
                        this.$message.error("用户名错误");
                        return;
                    }
                    localStorage.setItem("ACCESS_TOKEN", "accessToken");
                    this.$store.commit("SET_ROLES", roleList);
                    this.$store.commit("SET_MENUS", ["menu1", "menu2"]);
                    setTimeout(() => {
                        document.documentElement.setAttribute(
                            "data-theme",
                            "dark"
                        );
                        this.$router.push({ path: "/" });
                        this.$refs.formLoginRef.resetFields();
                        console.log(this.$router, "router");
                    }, 500);
                } else {
                    console.log("error submit!!");
                    return false;
                }
            });
        },
    },
};
</script>

<style lang="less" scoped>
.login-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    .user-login {
        width: 370px;
        height: 230px;
        margin: 0 auto;
        padding: 30px;
        box-sizing: border-box;
        border: 1px solid #d6dfec;
        border-radius: 5px;
        box-shadow: 0 0 10px #d6dfec;
        background-color: #fff;
    }
    .login-button {
        width: 100%;
        color: #fff;
        background: rgb(44, 182, 155);
        &:hover {
            color: #fff;
            border-color: rgb(44, 182, 155);
            background: rgba(44, 182, 155, 0.8);
        }
    }
}
</style>
